<template>
  <div>
    <MyNavBar></MyNavBar>

    <ul>
      <li
        class="cinema"
        v-for="{ cinemaId, name, address, lowPrice, Distance } in cinemas"
        :key="cinemaId"
      >
        <div class="left">
          <p class="name">{{ name }}</p>
          <p class="address">{{ address }}</p>
        </div>

        <div class="right">
          <p class="price">
            <span>￥{{ lowPrice / 100 + "起" }}</span>
          </p>
          <p class="distance">{{ Distance.toFixed(2) + "km" }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { getCinemas } from "@api/movieApi";

import MyNavBar from "@components/MyNavBar.vue";

export default {
  components: {
    MyNavBar,
  },
  data() {
    return {
      cinemas: [],
    };
  },
  mounted() {
    getCinemas().then((cinemas) => (this.cinemas = cinemas));
  },
};
</script>

<style lang="scss" scoped>
@import "@assets/variable.scss";
.title {
  text-align: center;
}
li.cinema {
  display: flex;
  align-items: center;
  height: 70px;
  border-bottom: 1px solid #eee;
  padding: 0 1rem;

  div.left {
    flex-grow: 4;

    p.name,
    p.address {
      @include singleLineElipsis(18rem);
    }

    p.name {
      font-size: 1rem;
      margin-bottom: 0.5rem;
    }

    p.address {
      font-size: 0.7rem;
      color: #999;
      font-style: italic;
    }
  }

  div.right {
    flex-grow: 1;

    p {
      text-align: center;
    }

    p.price {
      margin-bottom: 0.5rem;
      font-size: 0.8rem;

      span {
        font-size: 0.75rem;
        font-style: italic;
        font-weight: 400;
        color: $myOrange;
        display: inline-block;
        min-width: 60px;
      }
    }

    p.distance {
      font-size: 0.75rem;
      color: #999;
    }
  }
}
</style>
